<template>
<div>
  <form>
    <input type="text" v-model="newState.item.name">
    <input type="text" v-model="newState.item.age">
    <input type="submit" @click="addItem">
  </form>
  <ul>
    <li v-for="(item, index) in state.items" :key="item.name" @click="removeItem(index)">
      No.{{index}} - {{item.name}} - {{item.age}}
    </li>
  </ul>
</div>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    let {state, removeItem} = originalData();
    let {newState, addItem} = newData(state);
    return {
      state,
      removeItem,
      newState,
      addItem
    };
  }
}
function originalData() {
  let state = reactive({
    items: [
      {
        name: 'GuanYu',
        age: '56'
      },
      {
        name: 'ZhangFei',
        age: '54'
      },
      {
        name: 'MaChao',
        age: '77'
      }
    ]
  });
  function removeItem(i) {
    state.items = state.items.filter((currentValue, index) => index != i);
  };
  return {
    state,
    removeItem
  };
}

function newData(state) {
  let newState = reactive({
    item: {
      name: '',
      age: ''
    }
  });
  function addItem(e) {
    e.preventDefault();
    state.items.push(Object.assign({}, newState.item));
    newState.item.name = '';
    newState.item.age = '';
  };
  return {
    newState,
    addItem
  };
}
</script>
